import React, {Component} from 'react';
import './index.less';
import {base} from 'nc-lightapp-front';
import Header from "./Header";
import updateButtonStatus from "../../container/functions/updateButtonStatus";
import getPsnSubData from "./functions/getPsnSubData";
import {getColor} from '../../../../../../hrpub/common/utils/utils';

const {color, bgColor} = getColor();

const {NCAnchor, NCScrollLink, NCScrollElement} = base;
const formLists = ['bd_psndoc', 'hi_psnjob_h', 'hi_psnorg_h'];

class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailData: props.detailTemplate
        };
        this.goBack = this.goBack.bind(this);
        this.searchTableData = this.searchTableData.bind(this);
        this.resetData = this.resetData.bind(this);
        this.resetCardTable = this.resetCardTable.bind(this);
        this.handleScrollClick = this.handleScrollClick.bind(this);
        updateButtonStatus.call(this, 'detail');
    }

    componentDidMount() {
        const {form, cardTable} = this.props;
        const {detailData} = this.state;
        form.setAllFormValue({'bd_psndoc': detailData.psndocForm && detailData.psndocForm.bd_psndoc});
        form.setAllFormValue({'hi_psnjob_h': detailData.psnjobForm && detailData.psnjobForm.hi_psnjob_h});
        form.setAllFormValue({'hi_psnorg_h': detailData.psnorgForm && detailData.psnorgForm.hi_psnorg_h});
        cardTable.setTableData('hi_psndoc_cert', detailData.certGrid && detailData.certGrid.hi_psndoc_cert);
        this.searchedItems = ['hi_psndoc_cert'];
        this.closeCardTable();
    }

    closeCardTable() {
        const {cardTable} = this.props;
        const {detailData} = this.state;
        //let cardTables = [];
        /**
         * 根据模板上的配置展开子集
         */
        detailData.displayArea.forEach(item => {
            if (item.moduletype === 'table') {
                cardTable.toggleCardTable(item.code, item.isunfold);
                if (item.isunfold) {
                    this.searchTableData(this.props, item.code, true);
                }
            }
        });
        //cardTable.toggleCardTable(cardTables, false);
    }

    goBack() {
        this.props.goBackToMainPage();
    }

    resetData(data) {
        this.setState({
            detailData: data
        }, this.resetCardTable)
    }

    resetCardTable() {
        const {form, cardTable} = this.props;
        const {detailData} = this.state;
        form.setAllFormValue({'bd_psndoc': detailData.psnorgForm && detailData.psndocForm.bd_psndoc});
        form.setAllFormValue({'hi_psnjob_h': detailData.psnorgForm && detailData.psnjobForm.hi_psnjob_h});
        form.setAllFormValue({'hi_psnorg_h': detailData.psnorgForm && detailData.psnorgForm.hi_psnorg_h});
        /*cardTable.setTableData('hi_psndoc_cert', detailData.certGrid && detailData.certGrid.hi_psndoc_cert, () => {
            cardTable.toggleCardTable('hi_psndoc_cert', false);
        });
        detailData.displayArea && detailData.displayArea.map(item => {
            if (item.moduletype === 'table' && item.code !== 'hi_psndoc_cert') {
                if (this.searchedItems.indexOf(item.code) === -1) this.searchedItems.push(item.code);
                cardTable.setTableData(item.code, {rows: []}, () => {
                    cardTable.toggleCardTable(item.code, false);
                    this.searchedItems.splice(this.searchedItems.indexOf(item.code), 1);
                });
            }
        });*/
        this.searchedItems = [];
        detailData.displayArea && detailData.displayArea.forEach(item => {
            if (item.moduletype === 'table') {
                cardTable.toggleCardTable(item.code, item.isunfold);
                if (item.isunfold) {
                    this.searchedItems.push(item.code);
                    this.searchTableData(this.props, item.code, true);
                }
            }
        });
    }

    searchTableData(props, moduleId, value) {
        if (!value || this.searchedItems.indexOf(moduleId) > -1) return;
        getPsnSubData.call(this, moduleId, (data) => {
            if (data) {
                this.props.cardTable.setTableData(moduleId, data[moduleId]);
            } else {
                this.props.cardTable.setTableData(moduleId, {rows: []});
            }
            this.searchedItems.push(moduleId);
        });
    }

    handleScrollClick(code) {
        return () => {
            this.props.cardTable.toggleCardTable(code, true);
        }
    }

    render() {
        const {form, cardTable, meta} = this.props;
        const {detailData} = this.state;
        let {createForm} = form;
        let {createCardTable} = cardTable;

        return (
            <div className="psn-query-detail">
                <Header goBack={this.goBack} {...this.props} detailData={detailData} resetData={this.resetData}/>
                <div className="psn-query-detail-content nc-bill-card">
                    <NCAnchor>
                        {detailData.displayArea && detailData.displayArea.map(item => {
                            return <NCScrollLink to={item.code} spy={true} key={item.code}
                                                 smooth={true} duration={300} offset={-100}>
                                <span>
                                    <span
                                        onClick={this.handleScrollClick(item.code)}
                                    >
                                        {item.name}
                                    </span>
                                </span>
                            </NCScrollLink>
                        })}
                    </NCAnchor>
                    <div>
                        {/*<NCScrollElement name='bd_psndoc'>
                            <div>
                                {detailData.image && <div className='psn-info-img'>
                                    <img src={detailData.image}/>
                                </div>}
                                <div className="nc-bill-form-area">
                                    {createForm('bd_psndoc')}
                                </div>
                            </div>
                        </NCScrollElement>*/}
                        {
                            detailData.displayArea && detailData.displayArea.map(item => {
                                return item.moduletype === 'table' ?
                                    <NCScrollElement name={item.code} key={item.code}>
                                        <div
                                            className={(detailData.busiSet.indexOf(item.code) > -1 ? "business-sub-table " : "") + " nc-bill-tableTab-area"}>
                                            {createCardTable(item.code, {
                                                //adaptionHeight: true,
                                                hideSwitch: () => {
                                                    return false
                                                },
                                                showIndex: true,
                                                onHeadAngleToggle: this.searchTableData
                                            })}
                                        </div>
                                    </NCScrollElement> :
                                    formLists.includes(item.code) ?
                                        <NCScrollElement name={item.code} key={item.code}>
                                            <div className="add-new-page-form-wrapper">
                                                <div className="add-new-page-title">
                                                    {item.name}
                                                </div>
                                                {item.code === 'bd_psndoc' &&
                                                <div
                                                    className="uploader-photo-wrapper"
                                                    style={{
                                                        backgroundColor: bgColor
                                                    }}
                                                >
                                                    {detailData.image && <img
                                                        src={detailData.image}
                                                        className="photo-show-box"
                                                    />}
                                                </div>}
                                                {createForm(item.code)}
                                            </div>
                                        </NCScrollElement> : null
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Detail;
